<script lang="ts" setup>
import { computed } from 'vue'

type BtnSize = 'large' | 'small'

const emit = defineEmits<{ (e: 'click'): void }>()

const props = withDefaults(defineProps<{
  /** 按钮尺寸 **/
  size?: BtnSize
  /** 是否禁用 **/
  disabled?: boolean
}>(), {
  size: 'large',
  disabled: false
})

const bindClass = computed(() => ({
  'base-btn-large': props.size === 'large',
  'base-btn-small': props.size === 'small'
}))
</script>

<template>
  <button @click="emit('click')" class="base-btn" :class="bindClass" :disabled="props.disabled">
    <slot></slot>
  </button>
</template>

<style scoped>
.base-btn {
  border: none;
  outline: none;
  color: #ffffff;
  background-color: var(--main-color);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 40px;
}
.base-btn:disabled {
  background-color: #DEDEDE;
}
.base-btn-large {
  display: block;
  width: 100%;
  height: 80px;
  font-size: 32px;
  font-weight: 500;
}
.base-btn-small {
  padding: 0.2em 1em;
  font-size: 24px;
  font-weight: 500;
}
</style>
